<template>
	<div class="box">
		<div class="app-left">
			<el-tabs tab-position="left" style="height: 100%" class="demo-tabs" @tab-change="tabChange">
			    <el-tab-pane :label="item.name" v-for="(item, index) in tabList" :key="index">
					
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="app-right">
			<Area :data="currId" v-if="currId"/>
			
		</div>
	</div>
	
</template>

<script setup lang="ts">
	import { onBeforeMount, ref, onMounted } from "vue";
	import Area from "./area.vue";
	import {
	  getWarehouseListApi,
	} from "@/api/warehouseApi";
	const tabList = ref([]);
	const getWarehouseList = async() => {
		const res = await getWarehouseListApi({page: 1, perPage: 999});
		if(res?.code === 200) {
			tabList.value = res.result.list
			currId.value = tabList.value.length > 0?tabList.value[0].warehouseId : null
			
		}
	}
	const currId = ref()
	onMounted(()=> {
		getWarehouseList()
	})
	const tabChange = (n:number) => {
		currId.value = tabList.value[n].warehouseId
	}
</script>

<style scoped>
	.box {
		height: 100%;
		box-sizing: border-box;
		padding: 0;
		margin: 10px 10px 0 !important;
		background-color: #fff;
		/* display: flex; */
	}
	.app-left {
		width: 150px;
		float: left;
		height: 100%;
		/* margin-right: 10px; */
	}
	.box :deep(.el-tabs__item) {
		width: 150px !important;
		overflow: hidden;
		font-size: 16px;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: table-cell;
		line-height: var(--el-tabs-header-height);
	}
	.app-right {
		height: 100%;
		padding: 10px 10px 10px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}
</style>